Position - Lightning Design System

information

You are currently viewing a sandbox preview version of Spring ’19 | Go back to Winter ’19

Positioning utilities give you the ability to change the position property of an element.

Position: Fixed

.slds-is-fixed can be used to position a container relative to the viewport.

Selector: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

Selector	`.slds-is-static`
Summary	Reset positioning back to normal behavior
Restrict	`*`
Modifier	True

Selector	`.slds-is-relative`
Summary	Used to contain children if children are absolutely positioned and out of flow. Also used to position element without changing layout.
Restrict	`*`
Modifier	True

Selector	`.slds-is-fixed`
Summary	Used to position an element relative to the viewport.
Restrict	`*`
Modifier	True

Selector	`.slds-is-absolute`
Summary	Used to position an element relative to its closest ancestor with relative positioning.
Restrict	`*`
Modifier	True

Selector	`.slds-is-nested`
Summary	Provides styles for a nested lists
Restrict	`*`
Modifier	True

Selector	`.slds-is-collapsed`
Summary	Hides elements inside a parent
Restrict	`*`
Modifier	True

Selector	`.slds-is-expanded`
Summary	Shows the elements inside the parent
Restrict	`*`
Modifier	True

Selector	`.slds-is-visually-empty`
Summary	Hides element and removes width
Restrict	`*`
Modifier	True